<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

.container {
	padding: 20px 0 0 0;
	width: 300px;
	margin: 0 auto;
}

.input-border-bottom {
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	display: flex;
}

.input-border-bottom input {
	outline: none;
	border: none;
	-wekit-appearance: button;
	-wekit-appearance: none;
	border-radius: 0;
	flex: 1;
}

.input-border-bottom button {
	background: #f5f5f5;
	color: #ccc;
	padding: 7px 8px;
	borde-raius: 5px;
	outline: none;
	border: none;
	-wekit-appearance: button;
	-wekit-appearance: none;
}

.login {
	padding: 10px 0;
	display: flex;
	justify-content: center;
}

.login button {
	width: 260px;
	height: 40px;
	background: pink;
	color: #fff;
	border-radius: 15px;
	border: none;
	outline: none;
	font-size: 20px;
}

.form-bottom {
	display: flex;
	justify-content: center;
	align-items: center;
}

.form-bottom span {
	padding-left: 10px;
}
.tel-error{
	color:red;
	display:none;
}
.verification-code-error{
	color:red;
	display:none;
}
</style>
</head>
<body>

	<div class="container">
		<div class="hello">欢迎注册</div>
		<div class="input-border-bottom">
			<!--onfocusout失去焦点事件-->
			<input type="" name="" placeholder="请输入手机号" id="tel" ><!-- onmouseout-- onmouseleave-- onblur="VerifyMobilePhoneNumber()"-->
		</div>
		<div class="tel-error" id="telError">
			请输入正确的手机号
		</div>
		<div class="input-border-bottom">
			<input type="" name="" placeholder="请输入验证码" id="verificationCode"  onfocusout="VerifyTheMessage()"><!--  onfocusout-->
			<button id="ver">获取验证码</button>
		</div>
		<div class="verification-code-error" id="verificationCodeError">
			请输入正确的验证码
		</div>
		<div class="login">
			<button id="enter">确定</button>
			
		</div>
		<div class="form-bottom">
			<input type="checkbox" id="myRadio"  value="1"  name="myRadio"  >
			 <span> 
			 	已阅读并同意 
			 	<a href="javascript:;"> 
			 		《注册服务条款》
			 		 </a>
			</span>
		</div>
	</div>

	<script type="text/javascript">
		/**1.判断手机号是否符合要求*/
		let ver=document.getElementById("ver"),
			//获取验证码
			verificationCode = document.getElementById("verificationCode"),
			//获取手机号
			tel = document.getElementById("tel"),  		 
			telError = document.getElementById('telError'),
			verificationCodeError = document.getElementById('verificationCodeError'),
			//手机号正则
			telReg = /^1[0-9]\d{9}$/,
			//短信正则
			verificationCodeReg = /^[0-9]\d{3}$/,
			time=30;
			//验证手机号码
		debugger
		ver.onclick=function VerifyMobilePhoneNumber() {
			if (telReg.test(tel.value)) {
				telError.style.display = "none";
				ver.style.background = "blue";
				ver.style.color = "#fff";
				
				settime(ver);
			} else {
				telError.style.display = "block";
			}
		}

		/* function leave(){
			 ver.style.background="blue";
				ver.style.color="#fff";
		}  */

		/*  $(document).ready(function(){
			  $("#tel").mouseleave(function(){
				  ver.style.background="blue";
					ver.style.color="#fff";
			  });
			});  */

		//验证短信验证码
		function VerifyTheMessage() {
			if (verificationCodeReg.test(verificationCode.value)) {
				verificationCodeError.style.display = "none";

			} else {
				verificationCodeError.style.display = "block";
			}
		}

		/**2.发送验证码倒计时*/
		function settime(el){
			if(time==0){
				el.removeAttribute("disabled",);
				el.innerHTML="获取验证码";
				time=30;
				return;
			}else{
				el.setAttribute("disabled",true);
				el.innerHTML=time+"秒后再获取";
				time--;	
			}
			setTimeout(function(){
				settime(el)
			},1000);
		}
		
		enter.onclick=function V(){
			confirm()
		} 
		function confirm(){
			enter.style.width="260px";
			enter.style.height= "40px";
			enter.style.background= "pink";
			enter.style.color="#fff";
			enter.style.border="none";
			enter.style.outline="none";
			
		}
	
	</script>
</body>
</html>
